<script setup>
import { useRouter } from "vue-router";
import { onMounted } from "vue";
let router = useRouter()

// 刷新验证码
onMounted(() => { changeImg() })

let userTxt = reactive({ name: "", pswd: "", pswd2: "", yzm: "" })

//刷新验证码
function changeImg() {
  document.getElementById("validateCodeImg").src =
    URLheader + "/drawimage?" + Math.random();
}

// 当用户名失去焦点时
function nameBlur() {
  if (userTxt.name) {
    myPost("/user/getUsersCountByUserName", { username: userTxt.name.trim() }, data => {
      if (data != 0) myMsgE('该用户名被占用了哦')
    })
  }
}

// 当用户单击登录按钮时
function registClick() {
  // 普通校验
  if (!userTxt.name.trim() || !userTxt.pswd.trim() || !userTxt.pswd2.trim() || !userTxt.yzm.trim()) {
    ElMessage.error('请输入相关信息')
    return false;
  }
  if (userTxt.pswd.trim() != userTxt.pswd2.trim()) {
    ElMessage.error('两次密码不一致')
    return false;
  }

  // 用户名占用
  myPost("/user/getUsersCountByUserName", { username: userTxt.name.trim() }, data => {
    if (data != 0) {
      myMsgE('该用户名被占用了哦')
      return false
    } else {
      // 没被占用，可以注册
      myPost('/user/regist',
        { username: userTxt.name.trim(), password: userTxt.pswd.trim(), clientcheckcode: userTxt.yzm.trim() },
        int => {
          // 验证码不对会返回 0
          if (int != 1) {
            myMsgE('验证码错误')
            changeImg()
            return false
          } else {
            myMsgS("注册成功！")
            router.push("/login")
            return false
          }
        })
    }
  })

}
</script>

<template>
  <!-- @click.self="router.go(-1)" -->
  <div class="mask">

    <div class="model main">
      <div class="tittle">SAU资讯网</div>

      <div class="inputdiv">
        <input type="text" v-model.trim="userTxt.name" placeholder="用户名" @blur="nameBlur" />
      </div>
      <div class="inputdiv">
        <input type="password" v-model.trim="userTxt.pswd" placeholder="密码" autocomplete="off" />
      </div>
      <div class="inputdiv">
        <input type="password" v-model.trim="userTxt.pswd2" placeholder="确认密码" autocomplete="off" />
      </div>
      <div class="inputdiv" style="position: relative">
        <input style="text-align: left" type="text" v-model="userTxt.yzm" name="clientcheckcode" class="checkcode"
          placeholder="验证码" />
        <img style="position: absolute; bottom: 10px; right: 5px" alt="验证码看不清，换一张" src="https://mylog.cool:8080/drawimage"
          id="validateCodeImg" @click="changeImg()" />
      </div>

      <div class="dl-btn" @click="registClick">注册</div>

      <div class="switch-btn">有账号？<router-link to="/login">直接登录</router-link>
      </div>
    </div>

  </div>
</template>

<style scoped lang="less">
/* 背景遮罩 */
.mask {
  // 背景遮罩
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; // 可以实现全屏
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 51; // 最顶

  .main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 51;
    max-width: 600px;
    width: 60%;
    min-width: 370px;
  }
}

// 标题
.main .tittle {
  font-size: 40px;
  margin: 10px 0px;
}

/*输入框*/
.inputdiv {
  margin-top: 10px;

  input {
    color: var(--text-color);
    text-align: center;
    height: 50px;
    width: 250px;
    font-size: 25px;
    border: 0px;
    background: transparent;
    border-bottom: 1px solid var(--mini-text-color);
  }
}

/*登录按钮*/
.dl-btn {
  height: 40px;
  width: 140px;
  background: #aaa;
  border-radius: 30px;
  border: none;
  font-size: 20px;
  color: #222;
  transition: 0.3s;
  line-height: 40px;
  text-align: center;
  margin-top: 30px;
}

.dl-btn:hover {
  background: #888;
}

/* 去除自动浏览器自动填充添加的样式 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition-delay: 99999s;
  -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}
</style>